<!DOCTYPE html>
<!--them前后端分离-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理</title>

    <!--引入layui-->
    <script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
<!--查询-->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>

<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">课程姓名:</label>
            <div class="layui-input-inline">
                <input type="text" name="cname" id="name" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
            <button type="reset" class="layui-btn layui-btn-warm  layui-icon layui-icon-refresh">重置</button>
        </div>
    </div>
</form>

<!-- 搜索条件结束 -->
<!-- 添加和修改的弹出层开始 -->
<!-- lay-verify="required"文本框为必填项 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv" >
    <form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">

            <input type="hidden" name="cid"  autocomplete="off">
            <input type="hidden" name="cselcount"    autocomplete="off">

            <div class="layui-inline">
                <label class="layui-form-label">课程:</label>
                <div class="layui-input-inline">

                    <input type="text" name="cname" lay-verify="required"   placeholder="请输入课程姓名" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">专业:</label>
                <div class="layui-input-inline">
                    <select name="mid" id="mid" lay-filter="select" class="layui-input" lay-verify="required">
                        <option value=""></option>
                    </select>

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">学分:</label>
                <div class="layui-input-inline">
                    <input type="text" name="ccredit" lay-verify="required"  placeholder="请输入学分" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')"
                           maxlength="1"   class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">学时:</label>
                <div class="layui-input-inline">
                    <input type="text" name="cperiod" lay-verify="required"  placeholder="请输入学时" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')"
                           maxlength="3"      class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" pane>
            <div class="layui-inline" pane>

                <label class="layui-form-label">状态:</label>


                    <div class="layui-input-block" >
                        <input type="radio" name="cstate" value="0" title="正常" th:checked="checked">
                        <input type="radio" name="cstate" value="1" title="暂停">
                    </div>

            </div>
            <div class="layui-inline" style="margin-left: 55px;">
                <label class="layui-form-label">必/选修:</label>


                    <div class="layui-input-block">
                        <input type="radio" name="studytype" value="必修" title="必修">
                        <input type="radio" name="studytype" value="选修" title="选修" th:checked="checked">
                    </div>


            </div>
        </div>

        <div class="layui-form-item" pane>
            <div class="layui-inline" pane>

                <label class="layui-form-label">最大人数:</label>
                <div class="layui-input-inline">
                <input type="text" name="cmaxcount" lay-verify="required"  placeholder="最大人数" autocomplete="off" oninput = "value=value.replace(/[^\d]/g,'')"
                       maxlength="3"   class="layui-input">
                </div>

            </div>
            <div class="layui-inline">
                <label class="layui-form-label">课程类型：</label>
                <div class="layui-input-inline">
                    <select name="ctid" id="ctid" lay-filter="selects" class="layui-input" lay-verify="required">
                        <option value="">请选课程类型</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" id="yu" lay-submit="">提交</button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
            </div>
        </div>
    </form>

</div>
<!-- 添加和修改的弹出层结束 -->
<!-- 数据表格开始 -->
<table class="layui-hide" id="userTable" lay-filter="userTable"></table>
<div style="display: none;" id="userToolBar">
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add">增加</button>
</div>
<!--<div  id="userBar" style="display: none;">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</div>-->





<script type="text/javascript" th:inline="none">

    var tableIns;
    layui.use([ 'jquery', 'layer', 'form', 'table'  ], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        //渲染数据表格
        tableIns=table.render({
            elem: '#userTable'   //渲染的目标对象
            ,url:'sel' //数据接口
            ,title: '课程数据表'//数据导出来的标题
            ,toolbar:"#userToolBar"   //表格的工具条

            ,cellMinWidth:200 //设置列的最小默认宽度
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [3, 10, 20]
            ,limit: 3//默认采用3
            ,cols: [
                [   //列表数据
                {field:'cid', title:'ID',align:'center',width:"70",sort: true}
                ,{field:'cname', title:'课程名字',align:'center',width:"150"}
                ,{field:'ccredit', title:'学分',align:'center',width:"70"}
                ,{field:'cperiod', title:'学时',align:'center',width:"70"}

                ,{field:'cstate', title:'状态',align:'center',width:"80",sort: true,templet:function(data){
                           if(data.cstate==0){
                               return "正常"
                           }else{
                               return "不可选"
                           }
                    }}
                ,{field:'ctname', title:'课程类型',align:'center',width:"100",sort: true}
                ,{field:'studytype', title:'修学类型',align:'center',width:"100",sort: true}
                ,{field:'mname', title:'所属专业',align:'center',width:"200"}
                ,{field:'cselcount', title:'已选人数',align:'center',width:"100",sort: true}
                ,{field:'cmaxcount', title:'最大人数',align:'center',width:"100"}

                ,{fixed: '', title:'操作',align:'center',width:'200',templet:function(data){
                        if(data.isdel==0){

                            return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                        }else{
                            return '<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="dels" style="background-color: rgb(255,198,51);">恢复</a>'
                        }
            }}
            ]
            ]
        })
        //搜索
        $("#doSearch").click(function(){
            var params=$("#searchFrm").serialize();//序列化表单

            tableIns.reload({
                url:"sel?"+params
            })
        });


        //监听头部工具栏事件
        table.on("toolbar(userTable)",function(obj){
            switch(obj.event){
                case 'add':
                    add();
                    break;
            };
        })
        var url;
        var mainIndex;
        //打开添加页面
        function add(){
            mainIndex=layer.open({
                type:1,
                title:'添加用户',
                content:$("#saveOrUpdateDiv"),
                area:['800px','400px'],
                success:function(index){
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    url="addcou";
                }
            });
        }
        //打开修改页面
        function openUpdate(data){
            mainIndex=layer.open({
                type:1,
                title:'修改',
                content:$("#saveOrUpdateDiv"),
                area:['800px','400px'],
                success:function(index){
                    form.val("dataFrm",data);
                    url="update";
                }
            });
        }
        //保存
        form.on("submit(doSubmit)",function(obj){
            //序列化表单数据
            var params=$("#dataFrm").serialize();
            $.post(url,params,function(obj){
                layer.msg("修改成功");
                //关闭弹出层
                layer.close(mainIndex)
                //刷新数据 表格
                tableIns.reload();
            })
        });


        //监听行工具事件
        table.on('tool(userTable)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除【'+data.cname+'】这个课程吗', function(index){
                    //向服务端发送删除指令
                    $.post("delcou",{cid:data.cid},function(res){
                        layer.msg(res);
                        //刷新数据 表格
                        tableIns.reload();
                    })
                });
            } else if(layEvent === 'edit'){ //编辑
                openUpdate(data);
            }else if(layEvent === 'dels'){
                layer.confirm('确定恢复'+data.cname+'这个课程吗', function(index){
                    //向服务端发送删除指令
                    $.post("hfcou",{cid:data.cid},function(res){
                        layer.msg("成功");
                        //刷新数据 表格
                        tableIns.reload();
                    })
                });

            }
        });
        //渲染下拉框
        $.ajax({
            //要跳转的地址
            url: 'selJson',
            //数据类型
            dataType: 'json',
            //提交类型
            type: 'post',
            //查询成功后执行的方法
            success: function (data) {
                $.each(data, function (index, item) {
                    $('#mid').append(new Option(item.mname, item.mid));// 下拉菜单里添加元素
                });
                layui.form.render("select");//重新渲染 固定写法
            }
        });
        //渲染下拉框
        $.ajax({
            //要跳转的地址
            url: 'selCoutu',
            //数据类型
            dataType: 'json',
            //提交类型
            type: 'post',
            //查询成功后执行的方法
            success: function (data) {
                $.each(data, function (index, item) {
                    $('#ctid').append(new Option(item.ctname, item.ctid));// 下拉菜单里添加元素
                });
                layui.form.render("selects");//重新渲染 固定写法
            }
        });
    })
</script>
</body>
</html>